<!-- 商品详情 -->
<template>

	<view class="detail-wrap">
		<!-- 缺省页 -->
		<shopro-empty v-if="showEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods_null.png'" :tipText="showEmptyText"
			btnText="返回上一页" @click="$Router.back()"></shopro-empty>
		<view class="detail_box" v-else>
			<view class="detail-content">
				<!-- 轮播 -->
				<!-- <u-swiper :height="750" borderRadius="0" :list="goodsInfo.images" indicator-pos="bottomRight" mode="number" :interval="3000" @click="onGoodsSwiper"></u-swiper> -->
				<!--轮播图-->
				<view class="swiper">
					<swiper :current="uCurrent" :indicator-dots="false" indicator-color="#FCF3F3"
						indicator-active-color="#EC3A40" class='swiper-view' @change="SwiperTab">

						<swiper-item class="swiper-video" v-for="(item,index) in goodsInfo.images" :key="index">

							<view v-if='item.substring( item.lastIndexOf(".")+1, item.length)=="mp4"'>
								<view style="position: relative;" @click="quanbu(item,index)">
									<!-- :poster="detailData.swiperList[0]" -->
									<video id="myVideo" ref="myVideoRef" :src="item" :show-center-play-btn="false"
										:controls="false" @play.stop="playFun()" @pause.stop="pauseFun()"
										@ended.stop="endedFun()">
									</video>
									<view class="video-img" @tap.stop="videoPlay()" v-if="startVideo">
										<image src="https://duomi.bigchun.com/images/common/bofang.svg" mode="">
										</image>
									</view>
								</view>

							</view>
							<image mode='scaleToFill' :src="item" v-else @click="onGoodsSwiper(item,index)"></image>
						</swiper-item>

						<!-- <swiper-item class="swiper-img" v-for="(item,index) in detailData.swiperList" :key="index">
				<image mode='scaleToFill' :src="item"></image>
			</swiper-item> -->

					</swiper>
					<block class="number">
						<view class="u-indicator-item-number">{{ uCurrent + 1 }}/{{ goodsInfo.images.length }}
						</view>
					</block>
				</view>
				<!-- 全屏播放视频 -->
				<video-full-screen v-model="videoFullScreenShow" :src="newvideo" @exit="exit()">
				</video-full-screen>
				<!-- 价格卡片组 -->
				<!--        <sh-price-card v-if="goodsInfo.id" :detail="goodsInfo" :type="detailType" @change="getActivityRules"></sh-price-card>-->
				<view class="title-box u-p-20 u-p-b-10 u-skeleton-fillet1">
					<view class="goods-title u-ellipsis-2  u-flex u-flex-row u-row-between"
						style="align-items: flex-start;">
						<view>
							<!-- 	<view class="u-ellipsis-1 shopprice"
								v-if="!goodsInfo.activity_type&&goodsInfo.goods_type=='2'">
							</view> -->
							<view class="u-ellipsis-1 shopprice">
								<view class="" style="font-size:14px;">
									会员价
								</view>
								<view  class="discount-box">
									{{'￥' + goodsInfo.vip_price  }}
								</view>
								<!-- <view v-if="isVip != 1" class="discount-box">
									{{'￥' + goodsInfo.price  }}
								</view> -->
								<view class="huaxian">
									{{'￥' + goodsInfo.price  }}
								</view>
								<!-- <view class="discount-box-youhui">
									{{goodsInfo.zeng_text}}
								</view> -->
							</view>
							<!-- <view class="u-ellipsis-1 shoppriceyuan" v-if="goodsInfo.youhui_price">
								{{'￥' + goodsInfo.youhui_price  }}
								<view class="discount-box">
									(优惠券价)
								</view>
								<view class="discount-box-youhui" v-if="goodsInfo.goods_type != 2">
									不赠送代金券
								</view>
								<view class="discount-box-youhui" v-else>
									赠送{{goodsInfo.youhui_price / 2}}代金券
								</view>
							</view> -->
						</view>
						<view class="tools-item u-flex u-flex-row u-row-center u-col-center"
							@tap="onFavorite(goodsInfo.id)">
							<u-icon v-if="Boolean(goodsInfo.favorite)" name="star-fill" color="#FE811C" size="34">
							</u-icon>
							<u-icon v-else name="star" color="#999999" size="34"></u-icon>
							<text class="tool-title shoucang" :class="Boolean(goodsInfo.favorite)?'colors':''">收藏</text>
						</view>
					</view>
				</view>
				<!-- 标题 -->
				<view class=" title-box u-p-20 u-p-b-10 u-skeleton-fillet1">
					<view class="goods-title u-ellipsis-2  u-flex u-flex-row u-row-between u-col-center">

						<view class="u-ellipsis-1 shoptitle" >

              <image src="https://duomi.bigchun.com/imgs/dmcs.png" style="vertical-align:middle;width: 55px;height: 25px;" v-if="goodsInfo.sale_type ==1">
              </image>

              <image src="https://duomi.bigchun.com/imgs/dmzy.png" style="vertical-align:middle;width: 55px;height: 25px;" v-else>
              </image>


              <text style="vertical-align: middle;">{{ goodsInfo.title }}</text>

            </view>
					</view>
					<!--          <view class="sub-title u-ellipsis-2">{{ goodsInfo.subtitle }}</view>-->
				</view>
				<view class="u-flex title-box u-p-20 u-p-b-10 u-skeleton-fillet">
					<view class=" line-red sm radius" v-for="(item, index) in goodsInfo.service" :key="index">
						{{ item.name }}
					</view>
				</view>
				<!-- 参与的活动 -->
				<!--        <sh-activity v-if="goodsInfo.activity_discounts_tags && goodsInfo.activity_discounts_tags.length" :detail="goodsInfo.activity_discounts"></sh-activity>-->

				<!-- 规格选择 -->
				<!--        <view class="sku-box" @tap="showSku = true" v-if="activityRules.status !== 'waiting' && checkActivity(goodsInfo.activity_type, 'groupon') && goodsInfo.is_sku">-->
				<!--          <view class="u-flex u-row-between u-col-center">-->
				<!--            <view class="u-flex">-->
				<!--              <text class="title">规格</text>-->
				<!--              <text class="tip">{{ currentSkuText || '请选择规格' }}</text>-->
				<!--            </view>-->
				<!--            <text class="u-iconfont uicon-arrow-right" style="color: #bfbfbf;"></text>-->
				<!--          </view>-->
				<!--        </view>-->
				<!-- 服务 -->
				<!--        <sh-serve v-if="goodsInfo.service && goodsInfo.service.length" v-model="showServe" :serveList="goodsInfo.service"></sh-serve>-->

				<!-- 优惠券 -->
				<!--        <sh-coupon-->
				<!--            v-if="goodsInfo.coupons && goodsInfo.coupons.length && goodsInfo.activity_type !== 'seckill' && goodsInfo.activity_type !== 'groupon' && detailType !== 'score'"-->
				<!--            :couponList="goodsInfo.coupons"-->
				<!--        ></sh-coupon>-->

				<!-- 拼团人-->
				<!--        <sh-groupon-->
				<!--            v-if="goodsInfo.activity && goodsInfo.activity.type === 'groupon' && goodsInfo.activity.rules.team_card === '1' && detailType !== 'score'"-->
				<!--            :grouponData="goodsInfo"-->
				<!--        ></sh-groupon>-->

				<!-- 拼团玩法 -->
				<!--        <view-->
				<!--            v-if="goodsInfo.activity && Number(goodsInfo.activity.richtext_id) && goodsInfo.activity_type !== 'seckill'"-->
				<!--            class="groupon-play u-flex u-row-between u-p-l-20 u-p-r-20"-->
				<!--            @tap="jump('/pages/public/richtext', { id: goodsInfo.activity.richtext_id })"-->
				<!--        >-->
				<!--          <view class="u-flex">-->
				<!--            <text class="title">玩法</text>-->
				<!--            <view class="description u-ellipsis-1">{{ goodsInfo.activity.richtext_title || '开团/参团·邀请好友·人满发货（不满退款' }}</view>-->
				<!--          </view>-->
				<!--          <view class="u-iconfont uicon-arrow-right" style="color:#bfbfbf ;font-size: 28rpx;"></view>-->
				<!--        </view>-->
<!--        地区限制-->
        <view class="place-box u-flex" style="background: #ffffff;padding:0 20rpx" @click="showPlace_limit = true" v-if="goodsInfo.isLimitArea=='Y'">
          <view class="place_title">销售范围：</view><view class="place_num">{{goodsInfo.limitAreaText_string}}<u-icon name="question-circle" size="30" color="#FE7F1A"></u-icon></view>
        </view>
				<!-- 选项卡 -->
				<view class="tab-box u-flex">
					<view class="tab-item u-flex-col u-row-center u-col-start" v-for="item in tabList" :key="item.id"
						@click="handleTabClick(item.id)">
						<view class="tab-title">
							{{item.title}}
						</view>
						<text class="tab-line line-active" v-show="item.id === tabCurrent"></text>
					</view>
				</view>
				<view class="tab-detail u-p-20 u-m-b-10">
					<!-- 详情富文本 -->
					<view class="rich-box " v-if="tabCurrent === 'tab0'">
						<u-parse v-if="goodsInfo.sale_type!='1'" :html="goodsInfo.content"></u-parse>
            <view v-if="goodsInfo.sale_type=='1'">
              <image :src="item" mode="" v-for="(item,index) in goodsInfo.content" style="width: 100%;" mode="widthFix">
              </image>
<!--              <u-parse :html="item" mode="" v-for="(item,index) in goodsInfo.content">-->
<!--              </u-parse>-->
            </view>
					</view>
					<!-- 参数 -->
					<!-- <view class="goods-size" v-if="tabCurrent === 'tab1'">
						 <view class="table-box" v-if="goodsInfo.params && goodsInfo.params.length">
							 <view class="t-tr u-flex" v-for="t in goodsInfo.params" :key="t.title">
								 <view class="t-head u-flex">{{ t.title }}</view>
								 <view class="t-detail">{{ t.content }}</view>
							 </view>
						 </view>
					</view> -->

					<!-- 评价 -->
					<view v-if="tabCurrent === 'tab2'">
						<block v-for="comment in commentList" :key="comment.id">
							<sh-comment :comment="comment"></sh-comment>
						</block>
						<view class="goods-comment" v-if="tabCurrent === 'tab2'">
							<shopro-empty v-show="!commentList.length" marginTop="20rpx"
								:image="$IMG_URL + '/imgs/empty/comment_empty.png'" tipText="暂无评价~"></shopro-empty>
							<view class="more-box u-flex u-row-center u-col-center" v-show="commentNum > 3">
								<button class="u-reset-button more-btn u-flex u-row-center u-col-center"
									@tap="jump('/pages/goods/comment/comment-list', { goodsId: goodsInfo.id })">
									查看全部
									<view class="u-iconfont uicon-arrow-right" style="color:#d5a65a ;font-size: 28rpx;">
									</view>
								</button>
							</view>
						</view>
					</view>


				</view>
			</view>

			<!-- 商品foot -->
			<view class="tabbar-foot safe-area-inset-bottom" v-if="goodsInfo.id">
				<view class="detail-foot_box safe-area-inset-bottom  u-flex">
					<!-- foot左侧 -->
					<view class="left u-flex">
						<!-- 积分foot -->
						<!--            <view class="tools-item u-flex-col u-row-center u-col-center" @tap="goHome">-->
						<!--              <image class="tool-img shopro-selector-circular" src="https://duomi.bigchun.com/images/tabbar/tabbar_home1.png" mode=""></image>-->
						<!--              <text class="tool-title shopro-selector-rect">首页</text>-->
						<!--            </view>-->
						<!-- 非积分foot v-if="detailType !== 'score'" @tap="onFavorite(goodsInfo.id)"-->
						<block>
							<button open-type="contact" class="tools-item u-flex-col u-row-center u-col-center"
								style="background: transparent!important;border:none!important">
								<image class="tool-img" src="https://duomi.bigchun.com/images/shouye/Frame1.png" mode=""></image>
								<text class="tool-title">客服</text>
							</button>
							<!--              onShare-->
							<view class="tools-item u-flex-col u-row-center u-col-center" @tap="onShopcart">
								<image class="tool-img" src="https://duomi.bigchun.com/images/Frame.png" mode=""></image>
								<text class="tool-title">购物车</text>
							</view>
						</block>
					</view>
					<!-- foot右侧 -->
					<view class="detail-right">
						<!-- 积分按钮 -->
						<!--            <view class="detail-btn-box" v-if="detailType === 'score'"><button class="u-reset-button  score-btn" @tap="goPay">立即兑换</button></view>-->
						<view>
							<!-- 正常按钮 -->
							<view class="detail-btn-box u-flex u-row-around"
								v-if="!goodsInfo.activity_type&&goodsInfo.goods_type=='1'">
								<button class=" u-reset-button tool-btn add-btn" @tap="addCart">加入购物车</button>
								<button class=" u-reset-button tool-btn pay-btn" @tap="goPay">立即购买</button>
							</view>
							<!-- 活动按钮 -->
							<view class="detail-btn-box u-row-around" v-else>
								<button class=" u-reset-button seckilled-btn"
									v-if="activityRules.status && activityRules.status !== 'ing'">
									<text v-if="activityRules.status == 'waiting'">暂未开始</text>
									<text v-if="activityRules.status == 'end'">已结束</text>
								</button>
								<block v-else>
									<!-- 活动中，秒杀 -->
									<button class=" u-reset-button  seckill-btn"
										v-if="goodsInfo.activity && goodsInfo.activity.type === 'seckill'"
										@tap="goSeckill">
										立即抢购
									</button>
									<!--                  打折-->
									<button class=" u-reset-button  seckill-btn" @tap="goPay"
										v-if="goodsInfo.goods_type=='5'">
										立即抢购
									</button>
									<!--                 预售商品-->
									<block v-if=" goodsInfo.goods_type=='4'">
										<button class=" u-reset-button seckill-btn" v-if=" goodsInfo.is_allow_buy =='0'"  :class="goodsInfo.is_allow_buy =='0'?'':'add-btn'" @tap="addCart(goodsInfo)">到店提醒</button>
										<button class=" u-reset-button seckill-btn" v-if=" goodsInfo.is_allow_buy =='1'" @tap="goPay">立即购买</button>
									</block>
									<!-- 活动中，拼团 -->
									<!--                  <view class="u-flex groupon-btn-box" v-if="goodsInfo.activity && goodsInfo.activity.type === 'groupon'">-->
									<!--                    <button-->
									<!--                        class="tool-btn u-reset-button add-btn u-flex-col u-row-center u-col-center"-->
									<!--                        @tap="payGroupon"-->
									<!--                        v-if="goodsInfo.activity.rules.is_alone === '1'"-->
									<!--                    >-->
									<!--                      <text class="price font-OPPOSANS">￥{{ goodsInfo.price }}</text>-->
									<!--                      <text class="price-title">单独购买</text>-->
									<!--                    </button>-->
									<!--                    <button-->
									<!--                        class=" tool-btn u-reset-button groupon-btn u-flex-col u-row-center u-col-center"-->
									<!--                        :style="goodsInfo.activity.rules.is_alone === '0' ? 'width:400rpx' : ''"-->
									<!--                        @tap="payGroupon('groupon')"-->
									<!--                    >-->
									<!--                      <text class="price font-OPPOSANS">￥{{ goodsInfo.groupon_price }}</text>-->
									<!--                      <text class="price-title">我要开团</text>-->
									<!--                    </button>-->
									<!--                  </view>-->
								</block>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 规格弹窗 -->
			<shopro-sku v-if="showSku && goodsInfo.id" v-model="showSku" :goodsInfo="goodsInfo"
				:activityRules="activityRules"
				:buyType="goodsInfo.activity_type == 'seckill' || detailType === 'score' ? 'buy' : buyType"
				:grouponBuyType="grouponBuyType" :goodsType="detailType === 'score' ? 'score' : 'goods'"
				@changeType="changeType" @getSkuText="getSkuText"></shopro-sku>

			<!-- 	分享组件 -->
			<shopro-share v-model="showShare" :posterInfo="goodsInfo" :posterType="'goods'"></shopro-share>
			<!-- 地区限制 -->
      <u-popup v-model="showPlace_limit" mode="center" border-radius="20">
        <view class="notice-modal">
          <view class="dizhi_limit" v-if="goodsInfo.isLimitArea=='Y'">
            <view class="xiaoshou_limit">销售范围:</view>
            <view class="place_content">
              <view class="limit_province" v-for="(province_item,index_province) in goodsInfo.limitAreaText" :key="index_province">
                <view class="province_name">{{ province_item.name }}</view>
                  <view class="city_name">
                    <view class="limit_city" v-for="(city_item,index_city) in province_item.city" :key="index_city">
                      {{ city_item.name+':' }}
                      <view class="limit_count" v-for="(count_item,index_count) in city_item.area" :key="index_count">
                        {{count_item.name}}
                      </view>
                    </view>
                  </view>
                </view>
              </view>
             </view>
          <button class="u-reset-button tool-btn backs-btn" @tap="showPlace_limit=false">返回</button>
        </view>
      </u-popup>
		</view>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync();
	import shActivity from './components/sh-activity.vue';
	import shPriceCard from './components/sh-price-card.vue';
	import shServe from './components/sh-serve.vue';
	import shGroupon from './components/sh-groupon.vue';
	import shCoupon from './components/sh-coupon.vue';
	import shComment from './components/sh-comment.vue';
	import share from '@/shopro/share';
	import videoFullScreen from './components/video-full-screen/index.vue'
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {
			shServe,
			shPriceCard,
			shGroupon,
			shCoupon,
			shComment,
			shActivity,
			videoFullScreen
		},
		data() {
			return {
        showPlace_limit:false,
				// 商品详情详情数据
				detailData: {
					// productVideo: "http://snjhyy.oss-cn-hangzhou.aliyuncs.com/upload/20211216/35cfc9a2de09eb2a33ab971537b4bfba.mp4",
					swiperList: [
						'http://snjhyy.oss-cn-hangzhou.aliyuncs.com/upload/20211216/35cfc9a2de09eb2a33ab971537b4bfba.mp4',
						'http://snjhyy.oss-cn-hangzhou.aliyuncs.com/upload/20210222/a9d2eb580beec926c3a98f0df86bf1d2.png'
					], // 产品图片
				},
				newvideo: '',
				videoFullScreenShow: false, // 是否全屏显示视频
				videoplayObj: {}, //video对象
				contimg: false, // 是否正在播放视频
				startVideo: true, //中间播放按钮
				uCurrent: 0,
				// navbar
				backIconName: 'arrow-left',
				showSku: false, //是否显示规格弹窗
				currentSkuText: '', //选中规格
				detailType: '',
				showShare: false,
				buyType: 'sku',
				grouponBuyType: 'alone', //拼团购买方式。
				showEmpty: false,
				showEmptyText: '',
				showServe: false,
				goodsInfo: {},
				commentList: [], //商品评价列表
				commentNum: 0, //商品评价总数
				favorite: false,
				activityRules: {},
				currentSkuList: [],
				confirmGoodsInfo: {},
				swiperCurrent: 0, //轮播下标
				tabCurrent: 'tab0',
				tabList: [{
						id: 'tab0',
						title: '商品详情'
					},
					// {
					//   id: 'tab1',
					//   title: '规格参数'
					// },
					{
						id: 'tab2',
						title: '用户评价'
					}
				],
				isVip:0,
				// 价格
				vip_price:''
			};
		},
		// 是否登录
		computed: {
			...mapGetters(['isLogin', 'authType']),
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return 48;
				// #endif
				// #ifdef MP
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return height;
				// #endif
			}
		},
		async onLoad() {
			let that = this;
			this.backIconName = getCurrentPages().length > 1 ? 'arrow-left' : 'home-fill';
			const type = this.$Route.query.type;
			this.detailType = type;
			// switch (type) {
			// 	case 'score':
			// 		await this.getScoreDetail();
			// 		break;
			// 	default:
			await this.getGoodsDetail();
			// this.getVip()
			// }
		},

		onUnload() {
			share.setShareInfo();
		},
		mounted() {
			this.videoplayObj = wx.createVideoContext('myVideo')
		},
		methods: {
			getVip() {
				this.$https('user.isVip').then(res => {
					if (res.code === 1) {
						this.isVip = res.data;
					}
				})
			},
			handleTabClick(id) {
				this.tabCurrent = id;
			},
			SwiperTab(e) {
				this.uCurrent = Number(e.target.current)
				console.log(this.uCurrent);
			},
			exit() {
				this.videoFullScreenShow = false;
				this.startVideo = true
				this.videoplayObj.pause()
			},
			quanbu(val, i) {
				this.newvideo = val
				if (this.contimg) {
					this.videoplayObj.pause()
					this.videoFullScreenShow = true;
				} else {
					this.videoplayObj.play()
				}
			},
			playFun() {
				console.log('playFun')
				this.startVideo = false
				this.contimg = true
			},
			pauseFun() {
				this.startVideo = true
				this.contimg = false
			},
			endedFun() {
				this.startVideo = true
				this.contimg = false
			},
			videoPlay() {

				this.startVideo = false
				this.videoplayObj.play()
			},

			onShopcart() {
				this.$Router.push('/pages/index/cart');
			},
			// goBack
			// 微信直播商品跳转详情，需要用小程序原生接口才能返回。
			goBack() {
				let pageList = getCurrentPages();
				if (pageList.length > 1) {
					// #ifdef MP-WEIXIN
					wx.navigateBack();
					// #endif
					// #ifndef MP-WEIXIN
					uni.navigateBack();
					// #endif
				} else {
					this.$Router.pushTab('/pages/index/index');
				}
			},
			// 轮播图预览
			onGoodsSwiper(item, e) {
				this.$tools.previewImage([item], e);
			},
			getActivityRules(e) {
				if (e) {
					this.activityRules = JSON.parse(e);
				}
			},
			// 检测
			checkActivity(data, type) {
				if (data) {
					return !data.includes(type);
				}
				return true;
			},
			// 路由跳转
			jump(path, parmas) {
				this.showShare = false;
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			// 回到首页
			goHome() {
				this.$Router.pushTab('/pages/index/index');
			},

			// 选项卡
			onTab(id) {
				this.tabCurrent = id;
			},
			// 积分详情
			getScoreDetail() {
				let that = this;
				return new Promise((resolve, reject) => {
					that.$http('goods.scoreDetail', {
						id: that.$Route.query.id
					}).then(res => {
						if (res.code === 1) {
							that.goodsInfo = res.data;
							resolve(res.data);
						}
						if (res.code == 0) {
							resolve(false);
							that.$u.toast(res.msg);
						}
					});
				});
			},
			// 商品详情
			getGoodsDetail() {
				let that = this;
				return new Promise((resolve, reject) => {
					that.$https(
						'goods.getShopDetail', {
							id: that.$Route.query.id,
							token: uni.getStorageSync("token"),
						},
						'',
						false
					).then(res => {
						if (res.code === 1) {
							that.showEmpty = false;
							that.goodsInfo = res.data;
							if (that.goodsInfo.activity_type) {
								that.activityRules.status = that.goodsInfo.activity.status_code;
							}
							// // 是否是多规格
							// if(that.goodsInfo.sku.length != 0){
							// 	that.vip_price = that.goodsInfo.sku_price[0].vip_price
							// }
							// else{
							// 	that.vip_price = that.goodsInfo.vip_price
							// }
							share.setShareInfo({
								title: that.goodsInfo.title,
								// desc: that.goodsInfo.subtitle,
								image: that.goodsInfo.images[0],
								params: {
									page: 2,
									pageId: that.$Route.query.id
								}
							});
							that.getCommentList();
							resolve(res.data);
						} else {
							resolve(false);
							// that.$u.toast(res.msg);
							that.showEmpty = true;
							that.showEmptyText = res.msg;
						}
					});
				});
			},
			// // 商品评论
			getCommentList() {
				let that = this;
				that.$http('goods.commentList', {
					goods_id: that.goodsInfo.id,
					per_page: 3,
					type: 'all'
				}).then(res => {
					if (res.code === 1) {
						that.commentList = res.data.data;
						that.commentNum = res.data.total;
					}
				});
			},
			// 组件返回的type;
			changeType(e) {
				this.buyType = e;
			},
			// 组件返回的规格;
			getSkuText(e) {
				this.currentSkuText = e;
			},
			// 分享
			onShare() {
				this.showShare = true;
			},
			// 加入购物车
			addCart() {
				if (this.isLogin) {
					this.buyType = 'cart';
					this.showSku = true;
				} else {
					this.$store.dispatch('showAuthModal', 'toLogins');
				}
			},
			// 立即购买
			goPay() {
				if (this.isLogin) {
					this.buyType = 'buy';
					this.showSku = true;
				} else {
					this.$store.dispatch('showAuthModal', 'toLogins');
				}
			},
			// 拼团购买
			payGroupon(type) {
				if (this.isLogin) {
					if (type === 'groupon') {
						this.grouponBuyType = 'groupon';
					} else {
						this.grouponBuyType = 'alone';
					}
					this.buyType = 'buy';
					this.showSku = true;
				} else {
					this.$store.dispatch('showAuthModal', 'toLogins');
				}
			},

			// 立即秒杀
			goSeckill() {
				!this.isLogin ? this.$store.dispatch('showAuthModal', 'toLogins') : (this.showSku = true);
				this.buyType = 'buy';
			},

			// 收藏
			onFavorite(goodsId) {
				let that = this;
				that.$https('goods.favorite', {
					token: uni.getStorageSync("token"),
					goods_id: goodsId
				}).then(res => {
					if (res.code === 1) {
						that.$set(that.goodsInfo, 'favorite', res.data)
						console.log("=========that.goodsInfo", that.goodsInfo, that.goodsInfo.favorite)
						that.$u.toast(res.msg);
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.swiper {
		width: 100%;
		height: 750rpx;
		position: relative;
	}

	.swiper-view {
		width: 100%;
		height: 750rpx;

		image {
			width: 750rpx;
			height: 750rpx;
		}

		.swiper-img {
			image {
				width: 750rpx;
				height: 750rpx;
			}
		}


	}

	/* 指示器样式 */
	.u-indicator-item-number {
		width: 40px;
		padding: 10rpx;
		line-height: 1;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 100rpx;
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.8);
		position: absolute;
		right: 2%;
		bottom: 3%;
		text-align: center;
		letter-spacing: 3rpx;
	}

	.swiper-video {
		video {
			width: 100%;
			height: 750rpx;
		}

		/* 自定义按钮 */
		.video-img {
			display: inline-block;
			width: 90upx;
			height: 90upx;
			position: absolute;
			bottom: 0;
			left: 50%;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);

			image {
				width: 90upx;
				height: 90upx;
				z-index: 999;
				border: 2px solid #FFFFFF;
				border-radius: 50%;
			}
		}

	}

	// 标题栏
	.nav-box {
		position: fixed;
		width: 100%;
		min-height: 140rpx;
		z-index: 888;
		top: 0;

		.back-box {
			background-color: rgba(#000, 0.18);
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-top: 14rpx;
		}

		.back-hover {
			background-color: rgba(#fff, 0.18);
		}

		.state-hack {
			width: 100%;
			height: var(--status-bar-height);
			/* #ifdef H5 */
			height: 20rpx;
			/* #endif */
		}
	}

	.line-red {
		width: 110rpx;
		height: 30rpx;
		line-height: 30rpx;
		background-color: #FFF0E4;
		text-align: center;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		margin-right: 6rpx;
		color: #ff9900 !important;
		border: none !important;
	}

	// 拼团玩法
	.groupon-play {
		background: #fff;
		line-height: 94rpx;

		.title {
			font-size: 28rpx;
			color: #999;
		}

		.description {
			font-size: 28rpx;
			width: 500rpx;
			margin-left: 30rpx;
		}
	}

	// 选项卡
	.tab-box {
		height: 102rpx;
		background: #fff;
		//border-bottom: 1rpx solid rgba(#dfdfdf, 0.8);
		padding: 0 20rpx;

		.tab-item {
			flex: 1;
			height: 100%;
			position: relative;
			font-size: 30rpx;
			font-weight: bold;

			.tab-line {
				width: 48rpx;
				height: 4rpx;
				left: 8%;
				bottom: 0;
				transform: translateX(-50%);
				background: transparent;
				position: absolute;
				z-index: 2;
			}

			.line-active {
				background: #FD5755;
			}
		}
	}

	// 选项卡内容
	.tab-detail {
		min-height: 300rpx;
		background: #fff;

		// 规格参数
		.goods-size {
			.table-box {
				width: 710rpx;
				margin: auto;
				background: rgba(255, 255, 255, 1);
				border: 1rpx solid rgba(223, 223, 223, 1);

				.t-tr {
					border-bottom: 1rpx solid rgba(223, 223, 223, 1);

					&:last-child {
						border-bottom: none;
					}

					.t-head {
						font-size: 26rpx;
						color: #999;
						flex: 1;
						padding: 15rpx 20rpx;
						height: 100%;
					}

					.t-detail {
						font-size: 26rpx;
						border-left: 1rpx solid rgba(223, 223, 223, 1);
						flex: 4;
						padding: 15rpx 20rpx;
						height: 100%;
					}
				}
			}
		}

		// 富文本
		.rich-box {
      height: 100%;
			/deep/ image {
				display: block;
			}
      /deep/img {
        display: block;
      }

			/deep/ .note-video-clip {
				width: 100% !important;
			}
		}

		// 评论
		.goods-comment {
			.more-box {
				height: 100rpx;
				background: #fff;

				.more-btn {
					width: 200rpx;
					line-height: 60rpx;
					border: 1rpx solid rgba(213, 166, 90, 1);
					border-radius: 30rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(168, 112, 13, 1);
					padding: 0;
					background: #fff;
				}
			}
		}
	}

	// 规格卡片
	.sku-box {
		line-height: 82rpx;
		background: #fff;
		padding: 0 20rpx;
		margin: 10rpx 0;
		font-size: 28rpx;

		.title {
			color: #999;
			margin-right: 20rpx;
		}
	}

	// 标题卡片
	.title-box {
		background-color: #fff;

		.shopprice {
			// position: relative;
			font-size: 42rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FE7F1A;
			display: flex;
			flex-direction: row;

			.discount-box {
				// position: absolute;
				// right: -180rpx;
				// top: -2rpx;
				// width: 204rpx;
				// height: 40rpx;
				font-size: 42rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FE7F1A;
				text-align: center;
				line-height: 36rpx;
			}

			.huaxian {
				font-size: 26rpx;
				color: #999999;
				text-decoration: line-through;
				margin-left:10rpx;
			}

			.discount-box-youhui {
				position: absolute;
				right: -403rpx;
				top: 0rpx;
				width: 204rpx;
				height: 36rpx;
				background: linear-gradient(270deg, #FF5251 0%, #FD8E8A 100%);
				box-shadow: 0rpx 4rpx 4rpx 2rpx rgba(214, 53, 53, 0.3300);
				border-radius: 16rpx 0rpx;
				font-size: 10px;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 36rpx;
			}
		}

		.shoppriceyuan {
			position: relative;
			font-size: 38rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333;
			margin-top: 20rpx;

			.discount-box {
				position: absolute;
				right: -199rpx;
				top: 0rpx;
				width: 204rpx;
				height: 36rpx;
				font-size: 38rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333;
				text-align: center;
				line-height: 36rpx;
			}

			.discount-box-youhui {
				position: absolute;
				right: -397rpx;
				top: 0rpx;
				width: 204rpx;
				height: 36rpx;
				background: linear-gradient(270deg, #FF5251 0%, #FD8E8A 100%);
				box-shadow: 0rpx 4rpx 4rpx 2rpx rgba(214, 53, 53, 0.3300);
				border-radius: 16rpx 0rpx;
				font-size: 10px;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 36rpx;
			}
		}

		.goods-title {
			font-size: 28rpx;
			font-weight: 600;
			line-height: 42rpx;

			.shoptitle {
				font-size: 36rpx;
				overflow: hidden;
				line-height: 50rpx;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}

		.sub-title {
			color: #a8700d;
			font-size: 24rpx;
			font-weight: 500;
			line-height: 42rpx;
		}
	}

	.u-skeleton-fillet1 {
		padding-bottom: 0rpx !important;
	}

	// 底部工具栏
	.tabbar-foot {
		min-height: 100rpx;
		width: 100%;
	}

	.detail-foot_box {
		min-height: 100rpx;
		border-top: 1rpx solid rgba(238, 238, 238, 1);
		background-color: #fff;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 999;

		.left,
		.detail-right {
			flex: 1;
		}

		.tools-item {
			flex: 1;
			height: 100%;

			&::after {
				border: none !important;
			}

			.tool-img {
				width: 46rpx;
				height: 46rpx;
			}

			.tool-title {
				font-size: 22rpx;
				line-height: 22rpx;
				padding-top: 8rpx;
			}
		}

		.detail-btn-box {
			flex: 1;

			.tool-btn {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(#fff, 0.9);
				//width: 210rpx;
				min-height: 100%;
				//border-radius: 35rpx;
				padding: 0;
				width: 244rpx;
				min-height: 104rpx;
				border-radius: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.price {
					font-size: 24rpx;
					line-height: 24rpx;
					font-weight: bold;
					color: rgba(#fff, 0.9);
				}

				.price-title {
					font-size: 20rpx;
					line-height: 20rpx;
					font-weight: 500;
					color: rgba(#fff, 0.9);
					padding-top: 8rpx;
				}
			}

			.add-btn {
				//box-shadow: 0px 2rpx 5rpx 0px rgba(102, 103, 104, 0.46);
				//background: linear-gradient(90deg, rgba(103, 104, 105, 1), rgba(82, 82, 82, 1));
				background: #FD8E8A;
			}

			.pay-btn {
				//box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				//background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
				background: #FE5F5D;
			}

			.score-btn {
				width: 600rpx;
				line-height: 80rpx;
				background: linear-gradient(90deg, rgba(49, 133, 243, 1), rgba(80, 205, 242, 1));
				box-shadow: 0px 7px 6px 0px rgba(80, 205, 242, 0.2);
				border-radius: 40rpx;
				font-size: 30rpx;

				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				margin-right: 20rpx;
			}

			.seckill-btn {
				width: 432rpx;
				line-height: 70rpx;
				background: #FE5F5D;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
			}

			.seckilled-btn {
				width: 432rpx;
				line-height: 70rpx;
				background: rgba(221, 221, 221, 1);
				font-size: 28rpx;

				font-weight: 500;
				color: #999999;
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
			}

			.groupon-btn {
				width: 210rpx;
				height: 70rpx;
				background: linear-gradient(90deg, rgba(254, 131, 42, 1), rgba(255, 102, 0, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(255, 104, 4, 0.22);
				border-radius: 35rpx;
			}
		}
	}

	.tool-img {
		width: 46rpx;
		height: 46rpx;
	}

	.shoucang {
		color: #999999;
		font-weight: normal;
	}

	.colors {
		color: #FE811C;
	}
  /deep/.notice-modal{
    width: 95vw;
  }
  .dizhi_limit{
    display: flex;
    width: 100%;
    flex-direction: column;
    height: 60vh;
    overflow: hidden;
    padding: 20rpx;
    .place_content{
      height: 100%;
      overflow-y: scroll;
      .limit_province{
        display: flex;
        .province_name{
          flex: 1;
          font-weight: bold;
          font-size: 28rpx;
        }
        .city_name{
          flex:3;
          .limit_city{
            font-weight: bold;
            .limit_count{
              display: inline;
              font-weight: normal;
              margin-right: 6rpx;
            }
          }

        }
      }
    }
    .xiaoshou_limit{
      font-size: 30rpx;
      font-weight: bold;
      border-bottom: 2rpx solid #ccc;
      padding: 10rpx 0 20rpx;
      margin-bottom: 20rpx;
    }

  }
  .tool-btn {
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(#fff, 0.9);
    //width: 210rpx;
    min-height: 100%;
    //border-radius: 35rpx;
    padding: 0;
    width: 244rpx;
    min-height: 104rpx;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .price-title {
      font-size: 20rpx;
      line-height: 20rpx;
      font-weight: 500;
      color: rgba(#fff, 0.9);
      padding-top: 8rpx;
    }
  }
  .backs-btn{
    width: 80%;
    border-radius: 20rpx;
    background: #FE5F5D;
    margin: 20rpx auto;
    padding: 0;
    min-height: 84rpx;
  }

</style>
